<template>
  <div class="global-content" :class="{ 'has-tab': appStore.tab }">
    <router-view v-slot="{ Component, route }">
      <lay-transition type="fade">
        <keep-alive :max="16" v-if="appStore.routerAlive" :include="keepAliveStore.keepAliveList">
          <component :is="Component" :key="route.fullPath" v-if="isRouterShow"/>
        </keep-alive>
      </lay-transition>
    </router-view>
  </div>
</template>


<script lang="ts" setup>
import useAppStore from '@/store/modules/app'
import useKeepAliveStore from '@/store/modules/keepAlive'

const keepAliveStore = useKeepAliveStore()
const appStore = useAppStore()


// 刷新当前路由页面缓存方法
const isRouterShow = ref(true);
const refreshCurrentPage = (val: boolean) => (isRouterShow.value = val);
provide("refresh", refreshCurrentPage);
</script>

<style scoped>
.global-content {
  height: 100%;
  position: relative;
}

.global-content.has-tab {
  height: calc(100% - 41px);
  overflow: hidden;
}

.global-content::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.global-content::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #e2e2e2;
}
</style>
